<template>
	<view>
		<view class="ul">
			<!-- 缺少公众号属性 -->
			<view class="li"><text>公众号：</text>{{initData.plateformName}}</view>
			<view class="li"><text>粉丝数：</text>{{initData.fans}}</view>
			<view class="li"><text>女粉比例：</text>{{initData.femaleFansRatio}}</view>
			<view class="li"><text>投放时间：</text>{{initData.launchDate}}</view>
			<view class="li"><text>预约起始：</text>{{initData.startOrderDate}}</view>
			<view class="li"><text>预约截止：</text>{{initData.endOrderDate}}</view>
				<!-- 缺少保留属性 -->
			<view class="li"><text>保留时间：</text>{{initData.retentionTime}}天</view>
			<view class="li" v-if="initData.pageSite"><text>栏位位置：</text>{{initData.pageSite.desp}}</view>
			<view class="li"><text>标价：</text>{{initData.price}}</view>
			<view class="li"><text>推送时间：</text>{{initData.startOrderDate}}</view>
			<view class="li"><text>广告员：</text>{{initData.directorName}}</view>
			<view class="li"><text>联系方式：</text>{{initData.mobile}}</view>
			<view class="li"><text>备注：</text>{{initData.remark}}</view>
			<view class="" v-if="!isshow">
				<view class="li"><text>文章标题：</text>{{initData.articleTitle}}</view>
				<view class="li"><text>文章阅读量：</text>{{initData.readAmount}}</view>
				<view class="li"><text>获得粉丝数：</text>{{initData.getFans}}</view>
				<view class="li"><text>出单数：</text>{{initData.orderAmount}}</view>
			</view>
			
		</view>
		<view class="button" @click="open" v-if="isshow">立即预约</view>
		<uni-popup ref="popup" type="center">
			<view class="isok">
				<uni-icons type="close" class="icon" size="25" color="#999999" @click="close"></uni-icons>
				<image src="/static/img/ok.png"></image>
				<view>您已提交成功</view>
				<view class="button" @click="close">确 定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { uniIcons, uniPopup } from '@dcloudio/uni-ui';
import advertising from '../../../servers/agent/advertising/advertising.js';
export default {
	components: { uniIcons, uniPopup },
	data() {
		return {
			initData: '',
			id:'',
			isshow:true
		};
	},
	onLoad(option) {
		if(option.yuyue==1){
			this.isshow=false
		}
	},
	mounted() {
		uni.showLoading({
			title: '数据加载中',
			mask: true
		});
		var _this = this
		uni.getStorage({
		    key: 'advertisingdetails',
		    success: function (res) {
		        _this.id = res.data;
				console.log(res.data)
				_this.getDate();
		    }
		});
	},
	methods: {
		getDate(){
			advertising
				.details(this.id)
				.then(res => {
					this.initData = res.data;
					uni.hideLoading();
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		open() {
			// 需要在 popup 组件，指定 ref 为 popup
			
			uni.showLoading({
			    title: '数据加载中',
				mask:true
			});
			var obj=new Object();
			obj.adId=this.id;		
			 obj.status=1
			advertising
				.appment(obj)
				.then(res => {
					if(res.code==200){
						uni.hideLoading();
						this.$refs.popup.open();
					}else{
						uni.showToast({
						    title: res.msg,
						    duration: 2000,
							icon:'none'
						});
					}
				
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
			
			
		},
		close() {
			// 需要在 popup 组件，指定 ref 为 popup
			this.$refs.popup.close();
			uni.redirectTo({
				url: '/pages/agent/advertising/myreservation'
			});
			
		}
	}
};
</script>

<style lang="less" scoped>
.ul {
	margin: 34rpx 20rpx;
	background: #fff;
	padding: 0 20rpx;
	border-radius: 20rpx;
	box-shadow: 5rpx 0px 20rpx #c5c5c5;
	.li {
		border-bottom: 1px solid #efefef;
		line-height: 109rpx;
		color: #999999;
		font-size: 26rpx;
		text {
			display: inline-block;
			width: 200rpx;
			color: #333333;
			font-size: 28rpx;
		}
	}
	.li:nth-last-child(1) {
		border-bottom: none;
	}
}
.button {
	height: 90rpx;
	line-height: 90rpx;
	margin: 84rpx 20rpx 30rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 50px;
	font-size: 32rpx;
	background: linear-gradient(90deg, #d2158a, #fc6395);
}
.isok {
	position: relative;
	width: 572rpx;
	background: #fff;
	border-radius: 20rpx;
	text-align: center;
	padding: 105rpx 0;
	image {
		width: 190rpx;
		height: 190rpx;
		margin-bottom: 45rpx;
	}
	.button {
		width: 484rpx;
		margin: 84rpx auto 0;
	}
	.icon {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 22rpx;
		padding: 20rpx;
	}
}
</style>
